<template>
	<div class="modal" v-if="visible">
		<!--对话框开关-->
		<div class="modal-content">
			<div class="modal-title">{{title}}
				<span class="close" @click="$emit('update:visible',false)">×</span><!-- 每次点击都向父组件发送开关数据 -->
			</div>
			<slot class="modal-body" :colordata="colordata">
				<ul class="choicecolors">
					<li v-for="color in colordata" :key="color.id" class="choicecolor">
						<p @click="sendname(colordata[color.id-1])">
							<span :style="{backgroundColor:color.lefttop}"></span><span
								:style="{backgroundColor:color.top}"></span><span :style="{backgroundColor:color.left}"></span><span
								:style="{backgroundColor:color.right}"></span>
						</p>
						<p style="color: black;">{{color.text}}</p>
					</li>
				</ul>
			</slot>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				colordata: [{
						//以下颜色标注不是唯一标准(具体看需求)
						"id": 1, //每一个主题的唯一标识
						"lefttop": "#367fa9", //左上角后台管理标题(背景)颜色
						"top": "#3c8dbc", //头部导航颜色
						"left": "#222d32", //左边导航菜单(背景)颜色
						"right": "#f4f5f7", //右边内容(背景颜色)
						"clickbgc": "#1890ff", //点击后导航菜单的背景颜色
						"clicktext": "#ffffff", //点击后导航菜单的文字字体菜单
						"text": "蓝" //主体颜色文字标注
					}, {
						"id": 2,
						"lefttop": "#008d4c",
						"top": "#00a65a",
						"left": "#222d32",
						"right": "#f4f5f7",
						"clickbgc": "#52c41a",
						"clicktext": "#ffffff",
						"text": "绿"
					},
					{
						"id": 3,
						"lefttop": "#555299",
						"top": "#605ca8",
						"left": "#222d32",
						"right": "#f4f5f7",
						"clickbgc": "#722ed1",
						"clicktext": "#ffffff",
						"text": "紫"
					},
					{
						"id": 4,
						"lefttop": "#dd4b39",
						"top": "#d73925",
						"left": "#222d32",
						"right": "#f4f5f7",
						"clickbgc": "#f5222d",
						"clicktext": "#ffffff",
						"text": "红"
					},
					{
						"id": 5,
						"lefttop": "#f39c12",
						"top": "#e08e0b",
						"left": "#222d32",
						"right": "#f4f5f7",
						"clickbgc": "#faad14",
						"clicktext": "#ffffff",
						"text": "黄"
					}, {
						"id": 6,
						"lefttop": "#367fa9",
						"top": "#3c8dbc",
						"left": "#f9fafc",
						"right": "#f4f5f7",
						"clickbgc": "#f0f5ff",
						"clicktext": "#2f54eb",
						"text": "蓝灰"
					}, {
						"id": 7,
						"lefttop": "#008d4c",
						"top": "#00a65a",
						"left": "#f9fafc",
						"right": "#f4f5f7",
						"clickbgc": "#f6ffed",
						"clicktext": "#52c41a",
						"text": "绿灰"
					}, {
						"id": 8,
						"lefttop": "#555299",
						"top": "#605ca8",
						"left": "#f9fafc",
						"right": "#f4f5f7",
						"clickbgc": "#f9f0ff",
						"clicktext": "#722ed1",
						"text": "紫灰"
					}, {
						"id": 9,
						"lefttop": "#dd4b39",
						"top": "#d73925",
						"left": "#f9fafc",
						"right": "#f4f5f7",
						"clickbgc": "#fff1f0",
						"clicktext": "#f5222d",
						"text": "红灰"
					}, {
						"id": 10,
						"lefttop": "#f39c12",
						"top": "#e08e0b",
						"left": "#f9fafc",
						"right": "#f4f5f7",
						"clickbgc": "#fffbe6",
						"clicktext": "#faad14",
						"text": "黄灰"
					}, {
						"id": 11,
						"lefttop": "#367fa9",
						"top": "#3c8dbc",
						"left": "#0f2950",
						"right": "#f4f5f7",
						"clickbgc": "#1890ff",
						"clicktext": "#ffffff",
						"text": "蓝浅(新)"
					}, {
						"id": 12,
						"lefttop": "#008d4c",
						"top": "#00a65a",
						"left": "#0f2950",
						"right": "#f4f5f7",
						"clickbgc": "#52c41a",
						"clicktext": "#ffffff",
						"text": "绿浅(新)"
					},{
						"id": 13,
						"lefttop": "#CD6090",
						"top": "#EE6AA7",
						"left": "#8B0A50",
						"right": "#f4f5f7",
						"clickbgc": "#FF6EB4",
						"clicktext": "#ffffff",
						"text": "粉深(新)"
					},{
						"id": 14,
						"lefttop": "#CD919E",
						"top": "#EEA9B8",
						"left": "#8B0A50",
						"right": "#f4f5f7",
						"clickbgc": "#FFB5C5",
						"clicktext": "#ffffff",
						"text": "粉浅(新)"
					}
				],
				cuohoverbgc: ""//只是一个存储工具
			}
		},
		props: {
			"visible": { //接收父组件传参控制弹框是否显示
				type: Boolean,
				default: false //默认为false不显示主题框
			},
			"title": { //接收父组件传过来的标题
				type: String,
				default: ''
			}
		},
		methods: {
			sendname(e) { //当点击父组件中其中一个主题，会把该主题的数据接收，并向父组件发送方法和数据
				this.cuohoverbgc = e.clicktext//在传送方法时前取出颜色(其实没差)
				if (this.cuohoverbgc == "#ffffff") {
					this.cuohoverbgc = e.clickbgc
				}
				document.documentElement.style.setProperty('--hoverbgc', `${this.cuohoverbgc} `)
				this.$emit('givedata', e) //e就是向父组件发送的点击的主题数据
			},
		},
		created() {
			if(JSON.parse(localStorage.getItem("colorlist"))!=null){//用户第一次打开本项目时本地存储是无colorlist的
				this.cuohoverbgc = JSON.parse(localStorage.getItem("colorlist")).clicktext//页面刚打开的时候取本地存储的颜色
				if (this.cuohoverbgc == "#ffffff") {//因为有些背景颜色很淡，如遇到便选择文字颜色
					this.cuohoverbgc = JSON.parse(localStorage.getItem("colorlist")).clickbgc
				}
				document.documentElement.style.setProperty('--hoverbgc', `${this.cuohoverbgc} `)//使用css变量改变(关闭弹框按钮)的hover背景颜色
			}else{
				document.documentElement.style.setProperty('--hoverbgc', '#1890ff')
			}
		}
	}
</script>

<style scoped>
	* {
		margin: 0;
		padding: 0;
	}

	span {
		display: inline-block;
	}

	li {
		list-style: none;
	}

	.choicecolors {
		width: 100%;
		height: 360px !important;
		display: flex;
		justify-content: space-between;
		padding: 0 10px 0px 10px;
		flex-wrap: wrap;
		overflow-y: auto;
	}
	
	.choicecolor {
		height: 80px;
		margin-bottom: 10px;
		display: flex;
		flex: 1;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	}
	.choicecolor:last-child:nth-child(3n - 1) {
	    margin-right: 172px;
	}
	.choicecolor>p:nth-of-type(1) {
		height: 43px;
		margin: 5px;
		border: 1px solid #fff;
		box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
	}

	.choicecolor>p:nth-of-type(2) {
		text-align: center;
		font-size: 13px;
	}

	.choicecolor>p:nth-of-type(1):hover {
		cursor: pointer;
		border: 1px solid red;
	}

	.choicecolor>p>span:nth-of-type(1) {
		width: 20%;
		height: 13px;
		float: left;
	}

	.choicecolor>p>span:nth-of-type(2) {
		width: 80%;
		height: 13px;
		float: right;
	}

	.choicecolor>p>span:nth-of-type(3) {
		width: 31px;
		height: 30px;
	}

	.choicecolor>p>span:nth-of-type(4) {
		width: 126px;
		height: 30px;
	}

	.modal {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 9999;
		background-color: rgba(0, 0, 0, 0.3);
	}

	.modal-content {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		width: 530px;
		height: 420px;
		margin: auto;
		background-color: white;
		border-radius: 12px;
		box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
		overflow: hidden;
	}

	.modal-title {
		height: 40px;
		color: #333;
		padding: 0 15px;
		display: flex;
		font-size: 14px;
		background-color: #f0f0f0;
		justify-content: space-between;
		align-items: center;
	}

	.modal .close {
		display: inline-block;
		width: 25px;
		height: 25px;
		color: #272636;
		font-size: 16px;
		cursor: pointer;
		text-align: center;
		border-radius: 50%;
	}

	.modal .close:hover {
		color: #fff;
		transform: rotateZ(360deg);
		transition: all 1s;
		background-color: var(--hoverbgc) !important;
	}
</style>
